<template>
   <div class="container">
        <div class="header">
            <span class="title">
                二维码工具
            </span>
        </div>
        <el-tabs class="main" v-model="currentTab">
            <template :key="key" v-for="({label, name, component}, key) in tabsConfig">
                <el-tab-pane :label="label" :name="name">
                    <component :is="component"></component>
                </el-tab-pane>
            </template>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-property-decorator';
import { ElTabs, ElTabPane } from 'element-plus';
import QRcodeGenerate from './components/qrcode-generate/index.vue';
import QRcodeExplain from './components/qrcode-explain.vue';

@Options({
  components: {
    ElTabs,
    ElTabPane,
  },
})
export default class ToolsMergeLink extends Vue {
    currentTab = 'generate';

    get tabsConfig() {
      return [
        {
          label: '二维码生成',
          name: 'generate',
          component: QRcodeGenerate,
        },
        {
          label: '二维码解析',
          name: 'explain',
          component: QRcodeExplain,
        },
      ];
    }
}
</script>
<style lang="less" scoped>

.container {
    width: 800px;
    margin: auto;
    padding: 16px 28px;

    .header {
        margin: 16px 0;
        line-height: 28px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;

        .title {
            color: #000;
            font-size: 20px;
            vertical-align: middle;
        }
    }
    .buttons {
        text-align: center;
        margin-bottom: 20px;
    }
    .tips {
        color: #999;
        em {
            font-style: normal;
            text-decoration: underline;
            text-decoration-style: double;
        }
    }
}
</style>
